import React, { Component } from 'react';
// import { NavLink } from 'react-router-dom';
// import { Route, Switch, Redirect } from 'react-router-dom';
import Header from '@/components/Base/Header';
import axios from 'axios';
import { Spin } from 'antd';
import $ from  'jquery'
// import SongList from '@/components/Base/seek/SongList/SongList';
// import AlbumList from '@/components/Base/seek/AlbumList/AlbumList';
// import ListList from '@/components/Base/seek/ListList/ListList';
// import UserList from '@/components/Base/seek/UserList/UserList';
// import LrcList from '@/components/Base/seek/LrcList/LrcList';
import './Seek.scss';
class Com extends Component {
  constructor (props) {
    super(props)
    this.state = {
      pop : this.props.match.params.id,
      loading : true,
      SongList : [],
      AlbumList : [],
      ListList : [],
      UserList : [],
      LrcList : []
    }
  }

  componentDidMount () {
    axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+this.state.pop+'&type=song&limit=25&offset=0')
      .then(data => {
        console.log(data)
        this.setState({
          SongList : data.data.data,
          loading : false
        })
      })
      .catch((err) => {
        console.log(err)
      })
  }

  CutSongList () {
    this.setState({
      loading : true
    })
    $('.SeekList').css({'display':'block'})
    $('.AlbumList').css({'display':'none'})
    $('.ListList').css({'display':'none'})
    $('.UserList').css({'display':'none'})
    $('.LrcList').css({'display':'none'})
    axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+this.state.pop+'&type=song&limit=25&offset=0')
      .then(data => {
        console.log(data)
        this.setState({
          SongList : data.data.data,
            loading : false
        })
      })
      .catch((err) => {
        console.log(err)
      })
  }

  CutAlbumList () {
    this.setState({
      loading : true
    })
    $('.SeekList').css({'display':'none'})
    $('.AlbumList').css({'display':'block'})
    $('.ListList').css({'display':'none'})
    $('.UserList').css({'display':'none'})
    $('.LrcList').css({'display':'none'})
    axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+this.state.pop+'&type=album&limit=25&offset=0')
      .then(data => {
        console.log(data)
        this.setState({
          AlbumList : data.data.data.albums,
          loading : false
        })
      })
      .catch((err) => {
        console.log(err)
      })
  }

  CutListList () {
    this.setState({
      loading : true
    })
    $('.SeekList').css({'display':'none'})
    $('.AlbumList').css({'display':'none'})
    $('.ListList').css({'display':'block'})
    $('.UserList').css({'display':'none'})
    $('.LrcList').css({'display':'none'})
    axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+this.state.pop+'&type=list&limit=25&offset=0')
      .then(data => {
        console.log(data)
        this.setState({
          ListList : data.data.data.playlists,
            loading : false
        })
      })
      .catch((err) => {
        console.log(err)
      })
  }

  CutUserList () {
    this.setState({
      loading : true
    })
    $('.SeekList').css({'display':'none'})
    $('.AlbumList').css({'display':'none'})
    $('.ListList').css({'display':'none'})
    $('.UserList').css({'display':'block'})
    $('.LrcList').css({'display':'none'})
    axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+this.state.pop+'&type=user&limit=25&offset=0')
      .then(data => {
        console.log(data)
        this.setState({
          UserList : data.data.data.userprofiles,
            loading : false
        })
      })
      .catch((err) => {
        console.log(err)
      })
  }

  CutLrcList () {
    this.setState({
      loading : true
    })
    $('.SeekList').css({'display':'none'})
    $('.AlbumList').css({'display':'none'})
    $('.ListList').css({'display':'none'})
    $('.UserList').css({'display':'none'})
    $('.LrcList').css({'display':'block'})
    axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+this.state.pop+'&type=lrc&limit=25&offset=0')
      .then(data => {
        console.log(data)
        // this.setState({
        //   LrcList : data.data.data.albums,
        //     loading : false
        // })
      })
      .catch((err) => {
        console.log(err)
      })
  }

  goSeek () {
    this.props.history.push('/seek/' + this.refs.seekText.value)
    this.props.history.go(0)
  }

  goPlayer (id) {
    this.props.history.push('/player/' + id)
  }

  goPlayerList (id) {
    this.props.history.push('/playerlist/' + id)
  }

  render () {
    return (
      <div className = "Seek" >
        <Header {...this.props}/>
        <div className="SeekInput">
          <div className="SeekVessel">
            <input ref="seekText" type="text" placeholder={ this.state.pop }/>
            <button onClick={this.goSeek.bind(this)} className="iconfont icon-search"></button>
          </div>
        </div>
        <div className="CutVessel">
          <ul className="SeekCutList" >
            <li>
              <p onClick={this.CutSongList.bind(this)}>单曲</p>
            </li>
            <li>
              <p onClick={this.CutAlbumList.bind(this)}>专辑</p>
            </li>
            <li>
              <p onClick={this.CutListList.bind(this)}>歌单</p>
            </li>
            <li>
              <p onClick={this.CutUserList.bind(this)}>用户</p>
            </li>
            <li>
              <p onClick={this.CutLrcList.bind(this)}>歌词</p>
            </li>
          </ul>
        </div>

        <div className = "SeekList">
        <ul>
          <li>
            <p>歌曲</p>
            <b>歌手</b>
            <span>专辑</span>
            <em>时长</em>
          </li>
          {
            this.state.loading
            ?
            <Spin size="large" />
            :
            this.state.SongList.map((item, index) => {
            return (
                <li key={ item.id }>
                    <p  onClick = { this.goPlayerList.bind(this, item.id) }>{ item.name }</p>
                    <b>{ item.singer }</b>
                    <span>
                      <img src={item.pic} alt=""/>
                    </span>
                    {
                      item.time%60 < 10
                      ?
                      <em>{ '0'+parseInt(item.time/60)+':0'+item.time%60 }</em>
                      :
                      <em>{ '0'+parseInt(item.time/60)+':'+item.time%60 }</em>
                    }
                </li>
            )
            })
          }
        </ul>
      </div>

      <div className = "AlbumList">
        <ul>
          <li>
            <p>专辑</p>
            <span>歌手</span>
            <b>发行公司</b>
          </li>
          {
            this.state.loading
            ?
            <Spin size="large" />
            :
            this.state.AlbumList.map((item, index) => {
            return (
              <li key={ item.id }>
                <p>
                  <img src={item.picUrl} alt=""/>
                  { item.name }
                </p>
                <span>{ item.artist.name }</span>
                <b>{ item.company }</b>
              </li>
            )
            })
          }
        </ul>
      </div>

      <div className = "ListList">
        <ul>
          <li>
            <p>歌单</p>
            <span>创始人</span>
            <b>收听</b>
          </li>
          {
            this.state.loading
            ?
            <Spin size="large" />
            :
            this.state.ListList.map((item, index) => {
            return (
              <li key={ item.id }>
                <p onClick = { this.goPlayerList.bind(this, item.id) }>
                  <img src={item.coverImgUrl} alt=""/>
                  { item.name }
                </p>
                <span>{ item.creator.nickname }</span>
                <b>{ item.bookCount }万</b>
              </li>
            )
            })
          }
        </ul>
      </div>

      <div className = "UserList">
        <ul>
          {
            this.state.loading
            ?
            <Spin size="large" />
            :
            this.state.UserList.map((item, index) => {
            return (
              <li key={ item.userId }>
                <p>
                  <img src={item.avatarUrl} alt=""/>
                  { item.nickname }
                </p>
                <span>歌单：{ item.playlistCount }</span>
                <b>粉丝数：{ item.playlistBeSubscribedCount }</b>
                <button className="iconfont icon-add1">关注</button>
              </li>
            )
            })
          }
        </ul>
      </div>

      <div className = "LrcList">
        <ul>
            {
                this.state.loading
                ?
                <Spin size="large" />
                :
                this.state.LrcList.map((item, index) => {
                return (
                    <li key={ item.id }>
                        <p>{ item.name }</p>
                        <p>{ item.singer }</p>
                        <p>{ item.time }</p>
                    </li>
                )
                })
            }
        </ul>
      </div>
        {/* <Switch>
          <Route path = "/seek/songlist" component = { SongList } />
          <Route path = "/seek/albumlist" component = { AlbumList } />
          <Route path = "/seek/listlist" component = { ListList } />
          <Route path = "/seek/userlist" component = { UserList } />
          <Route path = "/seek/lrclist" component = { LrcList } />
          <Redirect to="/seek/songlist"/>
        </Switch> */}
      </div>
    )
  }
}

export default Com;
